{% extends "base.html" %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h2>用户管理</h2>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#addUserModal">
                <i class="mdi mdi-plus"></i> 添加用户
            </button>
            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#csvUploadModal">
                <i class="mdi mdi-file-upload"></i> 批量导入
            </button>
        </div>
    </div>

    <!-- 用户筛选区域 -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label" for="membershipFilter">会员等级</label>
                        <select class="form-select" id="membershipFilter" name="membershipFilter">
                            <option value="普通会员">普通会员</option>
                            <option value="银卡会员">银卡会员</option>
                            <option value="金卡会员">金卡会员</option>
                            <option value="钻石会员">钻石会员</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label" for="statusFilter">用户状态</label>
                        <select class="form-select" id="statusFilter" name="statusFilter">
                            <option value="">全部</option>
                            <option value="active">活跃</option>
                            <option value="inactive">非活跃</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="form-label" for="searchInput">搜索用户</label>
                        <input type="text" class="form-control" id="searchInput" name="search" placeholder="搜索用户名/邮箱/手机" aria-label="搜索用户名、邮箱或手机号">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mt-4 pt-2">
                        <button class="btn btn-primary d-block w-100" id="searchBtn" aria-label="搜索用户">
                            <i class="mdi mdi-magnify" aria-hidden="true"></i> 搜索
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户列表 -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>手机号</th>
                            <th>会员等级</th>
                            <th>消费得分</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="userTableBody">
                        <!-- 用户数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <nav aria-label="Page navigation" class="mt-4">
                <ul class="pagination justify-content-center" id="pagination">
                    <!-- 分页将通过JavaScript动态加载 -->
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- 添加用户模态框 -->
<div class="modal fade" id="addUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="addUserForm">
                    <div class="mb-3">
                        <label class="form-label" for="username">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" required aria-required="true">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="email">邮箱</label>
                        <input type="email" class="form-control" id="email" name="email" required aria-required="true">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="phone">手机号</label>
                        <input type="tel" class="form-control" id="phone" name="phone">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="membership_level">会员等级</label>
                        <select class="form-control" id="membership_level" name="membership_level">
                            <option value="普通会员">普通会员</option>
                            <option value="银卡会员">银卡会员</option>
                            <option value="金卡会员">金卡会员</option>
                            <option value="钻石会员">钻石会员</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveUserBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- CSV上传模态框 -->
<div class="modal fade" id="csvUploadModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">批量导入用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label" for="csvFile">选择CSV文件</label>
                    <input type="file" class="form-control" id="csvFile" name="csvFile" accept=".csv" aria-label="选择CSV文件上传">
                    <div class="form-text">
                        <p class="mb-2">CSV文件必须包含以下字段：</p>
                        <strong>必填字段：</strong>
                        <ul class="mb-2">
                            <li>username - 用户名</li>
                            <li>email - 邮箱</li>
                        </ul>
                        <strong>可选字段：</strong>
                        <ul class="mb-2">
                            <li>phone - 手机号</li>
                            <li>membership_level - 会员等级</li>
                            <li>consumption_score - 消费得分</li>
                        </ul>
                        <strong>消费记录字段（可选）：</strong>
                        <ul>
                            <li>order_number - 订单编号</li>
                            <li>order_amount - 订单金额</li>
                            <li>payment_method - 支付方式</li>
                            <li>product_name - 商品名称</li>
                            <li>product_price - 商品价格</li>
                            <li>product_quantity - 商品数量</li>
                            <li>product_category - 商品类别</li>
                        </ul>
                    </div>
                </div>
                <div id="uploadStatus" class="mt-3"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="uploadCsvBtn">上传</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑用户模态框 -->
<div class="modal fade" id="editUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="editUserForm">
                    <input type="hidden" name="user_id">
                    <div class="mb-3">
                        <label class="form-label">用户名</label>
                        <input type="text" class="form-control" name="username" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">邮箱</label>
                        <input type="email" class="form-control" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">手机号</label>
                        <input type="tel" class="form-control" name="phone">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">会员等级</label>
                        <select class="form-select" name="membership_level" required>
                            <option value="普通会员">普通会员</option>
                            <option value="银卡会员">银卡会员</option>
                            <option value="金卡会员">金卡会员</option>
                            <option value="钻石会员">钻石会员</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">状态</label>
                        <select class="form-select" name="status" required>
                            <option value="true">活跃</option>
                            <option value="false">非活跃</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updateUserBtn">更新</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/user_management.js') }}"></script>
<script src="{{ url_for('static', filename='js/csv-upload.js') }}"></script>
{% endblock %}
